<template>
  <!-- 三公经费 -->
  <div class="Finance">
    <div class = "tabTitle">
      <span>财务监督</span>
    </div>
    <div class="data_wrap">
      <div class="search">
        <div style = "display: inline-block; margin-top:22px;">
            <span>公司/部门名称：</span>
            <el-select v-model = "queryParam.orgCode" 
                style = "width:154px;margin-right:20px;height:36px">
                <!-- <el-option
                :label = "'全部'"
                :value = "''"
                ></el-option> -->
                <el-option
                v-for = "(item2, index2) in orgCodeOptions"
                :key = "index2"
                :label = "item2.orgName"
                :value = "item2.orgCode"
                ></el-option>
            </el-select>
        </div>
        <div style = "display: inline-block; margin-top:22px;">
          <span class = "demonstration">周期：</span>
          <el-date-picker
            style = "width:220px;margin-right:20px;height:36px"
            v-model="monthrange"
            type="monthrange"
            align="left"
            range-separator="至"
            start-placeholder="开始月份"
            end-placeholder="结束月份"
            value-format="yyyy-MM"
            :picker-options="pickerOptions">
          </el-date-picker>
        </div>
        <div style = "display: inline-block; margin-top:22px;">
          <el-button
            type = "primary"
            style = "width:52px;margin-left: 20px;padding:0px;height:36px;margin-top:22px;"
            @click = "query">查询</el-button>
          <el-button 
            style = "width:52px;margin-left: 12px;padding:0px;height:36px;margin-top:22px;" 
            @click = "resetQueryParam">重置</el-button>
        </div>
      </div>
      <div class="echarts_warp">
        <div class="echarts_title">
          <i class="el-icon-money" style="font-size:20px;color:#3D7FFF;"></i>
          <span style="margin-left:6px;">资产变动情况</span>
        </div>
        <div class="echarts_content">
          <div class="assetsChange_chart" id="assetsChange_chart" style="height: 400px;"></div>
          <el-button style="position: absolute;bottom: 0;right: 0;" @click="changeTable('assetsChange')">数据表</el-button>
          <div class="bar_chart" v-if="assetsData.length === 0" style="display:flex;align-items:center;justify-content:center;position: absolute; width: 100%; background: #fff; top: 0;height: 400px;">
            <span>暂无数据</span>
          </div>
        </div>
      </div>
      <div class="echarts_warp">
        <div class="echarts_title">
          <i class="el-icon-wallet" style="font-size:20px;color:#3D7FFF;"></i>
          <span style="margin-left:6px;">现金流量</span>
        </div>
        <div class="echarts_content">
          <div class="cashFlow_chart" id="cashFlow_chart" style="height: 400px;"></div>
          <el-button style="position: absolute;bottom: 0;right: 0;" @click="changeTable('cashFlow')">数据表</el-button>
          <div class="bar_chart" v-if="assetsData.length === 0" style="display:flex;align-items:center;justify-content:center;position: absolute; width: 100%; background: #fff; top: 0;height: 400px;">
            <span>暂无数据</span>
          </div>
        </div>
      </div>
      <div class="echarts_warp">
        <div class="echarts_title">
          <i class="el-icon-bank-card" style="font-size:20px;color:#3D7FFF;"></i>
          <span style="margin-left:6px;">利润</span>
        </div>
        <div class="echarts_content">
          <div class="profit_chart" id="profit_chart" style="height: 400px;"></div>
          <el-button style="position: absolute;bottom: 0;right: 0;" @click="changeTable('profit')">数据表</el-button>
          <div class="bar_chart" v-if="assetsData.length === 0" style="display:flex;align-items:center;justify-content:center;position: absolute; width: 100%; background: #fff; top: 0;height: 400px;">
            <span>暂无数据</span>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>
<script>
import {formatDate} from "@/utils/tools"
import echarts from "echarts";
let _that;
export default {
  data() {
    return {
      EWMDialogVisible: false,
      queryParam: {
        orgCode: '',
        startTime: '',
        endTime: ''
      },
      monthrange:[],
      orgCodeOptions: [],
      pickerOptions: {
        shortcuts: [{
          text: '本月',
          onClick(picker) {
            picker.$emit('pick', [new Date(), new Date()]);
          }
        }, {
          text: '今年至今',
          onClick(picker) {
            const end = new Date();
            const start = new Date(new Date().getFullYear(), 0);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近六个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setMonth(start.getMonth() - 6);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      assetsData: [],
      cashFlowData: [],
      profitData: [],
    }
  },
  created() {
  },
  mounted() {
    _that= this
    this.monthrange = [formatDate(new Date((new Date().getFullYear()-1) +'-'+ (new Date().getMonth() + 1)), 'yyyy-MM'),formatDate(new Date(), 'yyyy-MM')]
    this.getTpConsumptionGetOrg()
    this.query()
  },
  computed:{
    queryData(){
      let data = JSON.parse(JSON.stringify(this.queryParam))
      data.startTime = this.monthrange.length === 0 ? '' : this.monthrange[0]
      data.endTime = this.monthrange.length === 0 ? '' : this.monthrange[1]
      return data
    }
  },
  methods: {
    // 公司/部门查询
    getTpConsumptionGetOrg() {
      this.Api.getTpConsumptionGetOrg().then(res => {
        if (res && res.code === '0') {
          this.orgCodeOptions = res.data
        } else {
          this.orgCodeOptions = []
          this.$message.warning(res.message)
        }
      })
    },
    query() {
      let data = JSON.parse(JSON.stringify(this.queryParam))
      data.startTime = this.monthrange.length === 0 ? '' : this.monthrange[0]
      data.endTime = this.monthrange.length === 0 ? '' : this.monthrange[1]
      this.Api.getAssetsChangeQueryList(data).then(res => {
        if (res && res.code === '0') {
          this.assetsData = res.data
          if (this.assetsData.length !== 0) {
            this.makeAssetsChangeChart()
          }
        } else {
          this.assetsData = []
          this.$message.warning(res.message)
        }
      })
      this.Api.getCashFlowQueryList(data).then(res => {
        if (res && res.code === '0') {
          this.cashFlowData = res.data
          if (this.cashFlowData.length !== 0) {
            this.makeCashFlowChart()
          }
        } else {
          this.cashFlowData = []
        }
      })
      this.Api.getProfitQueryList(data).then(res => {
        if (res && res.code === '0') {
          this.profitData = res.data
          if (this.assetsData.length !== 0) {
            this.makeProfitChart()
          }
        } else {
          this.profitData = []
          this.$message.warning(res.message)
        }
      })
    },
    // 搜索栏重置事件
    resetQueryParam() {
        Object.assign(this.$data.queryParam, this.$options.data().queryParam)
    },
    // 资产变动查询Echarts
    makeAssetsChangeChart () {
      let seriesData = [
        {name: '总资产',symbol:'circle',type: 'line',stack: '总量',color:'#5B8FF9',data: [],itemStyle:{normal:{lineStyle:{width:2}}} },
        {name: '固定资产',symbol:'circle',type: 'line',stack: '总量',color:'#5AD8A6',data: [],itemStyle:{normal:{lineStyle:{width:2}}} },
        {name: '流动资产',symbol:'circle',type: 'line',stack: '总量',color:'#5D7092',data: [],itemStyle:{normal:{lineStyle:{width:2}}} },
        {name: '无形资产',symbol:'circle',type: 'line',stack: '总量',color:'#F6BD16',data: [],itemStyle:{normal:{lineStyle:{width:2}}} },
      ]
      let overMillion = false
      overMillion = this.assetsData.some(item => Math.abs(item.totalAssets) >= 10000 || Math.abs(item.fixAssets) >= 10000 || Math.abs(item.currentAssets) >= 10000 || Math.abs(item.intangibleAssets) >= 10000)
      let xAxisData = []
      this.assetsData.forEach(ele => {

        xAxisData.push(ele.mon)
        seriesData = seriesData.map(item =>{
          if (item.name ==='总资产') {
            item.data.push((Number(ele.totalAssets) / (overMillion ? 1000 : 1)).toFixed(2))
          } else if (item.name ==='固定资产') {
            item.data.push((Number(ele.fixAssets) / (overMillion ? 1000 : 1)).toFixed(2))
          } else if (item.name ==='流动资产') {
            item.data.push((Number(ele.currentAssets) / (overMillion ? 1000 : 1)).toFixed(2))
          } else if (item.name ==='无形资产') {
            item.data.push((Number(ele.intangibleAssets) / (overMillion ? 1000 : 1)).toFixed(2))
          }
          return item
        })
      })

      let optionData = {
        title: {
          subtext: "资产变动走势图（单位：" + (overMillion ? "万元" : "元") +"）",
          left: 10,
          top: 0,
          textStyle: {
            color: '#999999',
            fontSize: 12
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['总资产', '固定资产', '流动资产', '无形资产'],
          top: 30,
          left: 0,
          padding:20,
          textStyle: {
            color: '#333333',
            fontSize: 12
          },
          icon: 'roundRect',
        },
        grid: {
          left: '10',
          right: '120',
          bottom: '0',
          top:'100',
          containLabel: true
        },
         xAxis: {
          type: 'category',
          boundaryGap: false,
          data: xAxisData,
          textStyle: {
            color: '#000000',
            fontSize: 12
          },
        },
        yAxis: {
          type: 'value'
        },
        series: seriesData
      }
       // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("assetsChange_chart"));
      // 绘制图表
      myChart.setOption(optionData);
    },
    // 现金流量查询Echarts
    makeCashFlowChart() {
      let seriesData = [
        { name: '经济活动现金流', type: 'bar',color:'#5B8FF9',data: [],itemStyle: { normal: { label: { show: true, position: 'top', textStyle: { color: '#000000', fontSize: 12 } } } },},
        { name: '活动活动现金流', type: 'bar',color:'#5AD8A6',data: [],itemStyle: { normal: { label: { show: true, position: 'top', textStyle: { color: '#000000', fontSize: 12 } } } },},
        { name: '筹资活动现金流', type: 'bar',color:'#5D7092',data: [],itemStyle: { normal: { label: { show: true, position: 'top', textStyle: { color: '#000000', fontSize: 12 } } } },},
        { name: '现金净增加额', type: 'bar',color:'#F6BD16',data: [],itemStyle: { normal: { label: { show: true, position: 'top', textStyle: { color: '000000', fontSize: 12 } } } },},
        { name: '现金净余额', type: 'bar',color:'#E8684A',data: [],itemStyle: { normal: { label: { show: true, position: 'top', textStyle: { color: '000000', fontSize: 12 } } } },},
      ]
      let xAxisData = []
      this.cashFlowData.forEach(ele => {
        xAxisData.push(ele.mon)
        seriesData = seriesData.map(item =>{
          if (item.name ==='经济活动现金流') {
            item.data.push(ele.management)
          } else if (item.name ==='活动活动现金流') {
            item.data.push(ele.investment)
          } else if (item.name ==='筹资活动现金流') {
            item.data.push(ele.financing)
          } else if (item.name ==='现金净增加额') {
            item.data.push(ele.increase)
          } else if (item.name ==='现金净余额') {
            item.data.push(ele.balance)
          }
          return item
        })
      })
      let optionData = {
        color: ['#5B8FF9', '#5AD8A6', '#5D7092', '#F6BD16', '#E8684A'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['经济活动现金流', '活动活动现金流', '筹资活动现金流', '现金净增加额', '现金净余额'],
          top: 0,
          left: 0,
          padding:20,
          textStyle: {
            color: '#333333',
            fontSize: 12
          },
          icon: 'roundRect',
        },
        grid: {
          left: '10',
          right: '120',
          bottom: '0',
          top:'100',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: xAxisData,
          name: 'X Axis',
          axisLine: {onZero: true},
          splitLine: {show: false},
          splitArea: {show: false},
          textStyle: {
            color: '#000000',
            fontSize: 12
          },
        },
        yAxis: [
          {
            type: 'value',
            splitArea: {show: false}
          }
        ],
        series: seriesData
      }
       // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("cashFlow_chart"));
      // 绘制图表
      myChart.setOption(optionData);
    },
    makeProfitChart() {
      let seriesData = [
        {name:'主要业务收入',type:'line',smooth:true,data:[],itemStyle:{color:'rgba(91, 143, 249, 0.6)'},areaStyle:{color: new echarts.graphic.LinearGradient(
          { offset: 0, color: 'rgba(91, 143, 249, 0.1)', },
          { offset: 0.6, color: 'rgba(91, 143, 249, 0.3)'},
          { offset: 1, color: 'rgba(91, 143, 249, 0.5)', },
        )}},
        {name:'主营业务利润',type:'line',smooth:true,data:[],itemStyle:{color:'rgba(90, 216, 166, 0.6)'},areaStyle:{color: new echarts.graphic.LinearGradient(
          { offset: 0, color: 'rgba(90, 216, 166, 0.1)', },
          { offset: 0.6, color: 'rgba(90, 216, 166, 0.3)'},
          { offset: 1, color: 'rgba(90, 216, 166, 0.5)', },
        )}},
        {name:'主营业务成本',type:'line',smooth:true,data:[],itemStyle:{color:'rgba(246, 189, 22, 0.6)'},areaStyle:{color: new echarts.graphic.LinearGradient(
          { offset: 0, color: 'rgba(246, 189, 22, 0.1)', },
          { offset: 0.6, color: 'rgba(246, 189, 22, 0.3)'},
          { offset: 1, color: 'rgba(246, 189, 22, 0.5)', },
        )}},
        {name:'主营业务税金及附加',type:'line',smooth:true,data:[],itemStyle:{color:'rgba(232, 104, 74, 0.6)'},areaStyle:{color: new echarts.graphic.LinearGradient(
          { offset: 0, color: 'rgba(232, 104, 74, 0.1)', },
          { offset: 0.6, color: 'rgba(232, 104, 74, 0.3)'},
          { offset: 1, color: 'rgba(232, 104, 74, 0.5)', },
        )}},
      ]
      let xAxisData = []
      this.profitData.forEach(ele => {
        xAxisData.push(ele.mon)
        seriesData = seriesData.map(item => {
          if (item.name === '主要业务收入') {
            item.data.push(ele.income)
          } else if (item.name === '主营业务利润') {
            item.data.push(ele.profit)
          } else if (item.name === '主营业务成本') {
            item.data.push(ele.cost)
          } else if (item.name === '主营业务税金及附加') {
            item.data.push(ele.taxes)
          }
          return item
        })
      })
      let optionData = {
        grid: {
          left: '10',
          right: '120',
          bottom: '0',
          top:'100',
          containLabel: true
        },
        legend: {
          data: ['主要业务收入', '主营业务利润', '主营业务成本', '主营业务税金及附加'],
          top: 30,
          left: 0,
          padding:20,
          icon: 'roundRect',
          textStyle: {
            color: '#666666',
            fontSize: 12
          }
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985", // 指针的颜色
            },
          },
          position: function (pt) {
            return [pt[0], "10%"];
          },
        },
        xAxis:{
          type: 'category',
          boundaryGap: false,
          axisTick: {
            show: false,
          },
          data:xAxisData,
          nameTextStyle:{
            color: '#666666',
          },
        },
        yAxis: {
          type: "value",
          axisTick: {
            show: false,
          },
          // 设置 y轴样式
          axisLine: {
            lineStyle: {
              width: 0, // 粗细
            },
          },
          nameTextStyle:{
            color: '#666666',
          },
          // 设置网格线样式
          splitLine: {
            show: true,
            lineStyle: {
              width: 1,
              type: "dashed",
            },
          },
        },
        series: seriesData
      }
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("profit_chart"));
      // 绘制图表
      myChart.setOption(optionData);
    },
    changeTable(value) {
      this.$router.push({path:'/index/SuperviseAndReport/Finance/FinanceTable',query:{comeFrom:value, queryData: JSON.stringify(this.queryData)}})
    }
  }
};
</script>
<style lang="less" scoped>
.Finance{
  width: 100%;
  margin-bottom: 20px;
  .tabTitle{
    padding:20px 20px 10px 20px;
    background: #fff; 
    line-height: 28px;
    font-size: 20px;
    color: #333333;
    font-weight: 600;
    user-select:none;
  }
  /deep/.el-tabs__header{
    background:#fff;
    padding:0 20px 15px 20px;
    margin: 0;
  }
  .data_wrap {
    width:100%;
    display: flex;
    flex-direction: column;
    padding:0 20px;
    background:#fff;
    // 搜索
    .search {
        margin-bottom: 20px;
        width:100%;
        /deep/ .el-input__inner {
        height: 36px;
        }
        /deep/.el-icon-date
        {
        line-height: 36px;
        position: absolute;
            left: 190px;
        }
        /deep/.el-icon-arrow-up{
        line-height: 36px;
        }
        /deep/.el-date-editor .el-range-separator{
          line-height: 30px;
          width: 20%;
        }
    }
    .echarts_warp{
      .echarts_title{
        font-size: 16px;
        font-weight: 600;
        line-height: 24px;
        color: #333333;
        padding: 16px 0;
        border-bottom:1px solid #eeeeee;
      }
      .echarts_content{
        height:400px;
        position: relative;
      }
    }
  }
}
</style>